<template>
<!-- 倒计时、模态框 -->
    <div v-if="isLoading">
        <span id="deltaTime" ></span>
        <button type="button" class="submit" 
            @click="showModal"
        >
            交卷
        </button>
        <div class="modal-backdrop" v-if='isModalVisible'>
        <div class="modal">
            <div class="modal-header">
                <slot name="header">
                    <h2>信息提示：</h2>
                </slot>
            </div>
            <div class="modal-body">
                <slot name="body">
                     <h3><span>|</span>再次确认是否交卷？交卷后将不能继续答题！</h3>
                </slot>
            </div>
            <div class="modal-footer">
                <slot name="footer">
                    <button class="btn-blue"
                        :disabled='isdisabledFn'
                        @click="closeModal"
                    >
                        {{msg_return}}
                    </button>
                    <button class="btn-red" id="t" count='0'
                        :disabled='isdis'
                        @click="submit_end"
                    >
                        {{msg_sure}}
                    </button>
                </slot>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data(){
        return{
            isLoading: true,
            isModalVisible: false,
            msg_return:'返回作答',
            msg_sure:'确定交卷',
            isdisabledFn:false,
            isdis:false,
            tishi_message:''
        }
    },
    mounted() {
        const me = this
        // 初始化页面数据
        me.loadPageData();
    },
    methods:{
        loadPageData:function (){
            var _this=this;
            
            // 从sessionStorage取出数据，JSON.parse转为json对象
            var infolist=JSON.parse(sessionStorage.getItem('infolist'));
            _this.infolist=infolist;

            var deltaTime = document.getElementById("deltaTime");
            var now = new Date(); //调用js的Date类来获取时间
            var goal =now.getTime()+ 1000*60*60;
            var deltaTotalTime,deltaHours,deltaMinutes,deltaSeconds;
            var set=setInterval(function() { //每过一秒重新设置一次
                now = new Date();
                deltaTotalTime = (goal- now.getTime()) / 1000;
                if(deltaTotalTime>=0){
                    deltaHours = Math.floor(deltaTotalTime / 3600);
                    deltaMinutes = Math.floor((deltaTotalTime - 3600 * deltaHours) / 60);
                    deltaSeconds = Math.floor(deltaTotalTime - deltaHours * 3600 - deltaMinutes * 60);
                    deltaTime.textContent = "考试还有："  + deltaMinutes + "分" + deltaSeconds+'秒';
                }else{
                    alert("时间到，考试结束!");
                    clearInterval(set);
                    _this.submit_end();
                }
            }, 1000);  
                    
        },
        showModal: function () {
            this.isModalVisible = true;
            var noanswer=JSON.parse(sessionStorage.getItem('noanswer'));
            this.noanswer=noanswer;
            this.isdis=false;
            if(this.noanswer==null){
                this.tishi_message='尚未答题!';
                this.isdis=true;
            }else if(this.noanswer.length==0){
                this.tishi_message='已完成答题，确认是否交卷？交卷后将不能继续答题！'
            }else{
                this.tishi_message='尚未完成答题的题目序号为：'+this.noanswer;
            }
        },
        closeModal: function () {
            this.isModalVisible = false;
        },
        submit_end:function(){
            // 从sessionStorage取出数据，JSON.parse转为json对象
            var answerlist=JSON.parse(sessionStorage.getItem('answerlist'));
            this.answerlist=answerlist;
            this.msg_sure='提交中...';
            this.isdisabledFn=true;
            this.isdis=true;
            //发送数据给后端
            axios.post("/uploadScore",JSON.stringify(this.answerlist))
				.then((response)=>{
                    if(response.data.respCode=='-1'){
                        alert(response.data.respInfo);
                        this.$router.push({path:"/end"});
                    }else if(response.data.respCode=='0'){
                        this.$router.push({path:"/end"});
                    }
                })
				.catch((err)=>{
                    var curCount =document.getElementById('t').getAttribute("count");
                    if(parseInt(curCount)>4){
                        this.$alert('多次提交失败，请联系监考老师', '错误提示', {
                            confirmButtonText: '确定',
                        });
                        this.tishi_message='多次提交失败，请联系监考老师';
                        storage.set('answerliat',this.answerlist);
                    }else{
                        t.setAttribute("count",parseInt(curCount)+1);
                        this.$alert('提交失败，请重新提交', '错误提示', {
                            confirmButtonText: '确定',
                        });
                        this.msg_sure='确定交卷';
                        this.isdis=false;
                        this.isdisabledFn=false;
                    }  
                });
        }
    }
}
</script>
<style scoped>
    #deltaTime{
        margin-left:20%;margin-right: 1%;
    }
    .modal-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0,0,0,.3);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .modal {
        background-color: #fff;
        border: 1px solid #ddd;
        overflow-x:auto;
        display: flex;
        flex-direction: column; 
    }
    .modal-header,
    .modal-footer {       
        display: flex;
    }
    .modal-header {
        border-bottom: 1px solid #ddd;
        color: rgba(0,0,0,.8);
        justify-content: space-between;
        padding-left:15px;
    }
    .modal-header h2{
        color: #f15a24;
    }
    .modal-footer {
        border-top: 1px solid #eee;
        padding: 15px;
    }
    .modal-body {
        position: relative;
        padding: 20px 10px;
        color: rgba(0,0,0,.8);
    }
    .modal-body span{
        color:#4f93fe;
    }
    .btn-blue {
        background-color: #4f93fe;
        border: 1px solid #4f93fe;
    }
    .btn-red{
        background-color: #fe4fa1;
        border: 1px solid #fe4fe1;  
        margin-left: 50%;
    }
    .btn-blue,.btn-red{
        width: 100px;
        height: 40px;
        color: #fff;
        border-radius: 10px;
    }
</style>